import React,{useState,useEffect} from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  StatusBar,
  Pressable,
} from 'react-native';
import Button from '@/app/components/Button'
import { useNavigation } from "@react-navigation/native";
import {styles} from './style/LoginScreenCss'
import Headers from '@/app/components/header/Headers';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import { useTranslation } from '@/app/utils/useTranslation';

let ResetPasswordScreen = (props:any)=>{
    const { t } = useTranslation();
    let [tabIndex,setTabIndex] = useState('0');
    let [phone,setPhone] = useState('');
    let [disabled,setDisabled] = useState(false);
    let navigation = useNavigation<any>();
    let [navBarHeight,setNavBarHeight] = useState(0);

    function handleLogin() {
        console.log(navigation);
        setDisabled(true);
        setTimeout(() => {
            setDisabled(false);
            navigation.reset({
                index: 0,
                routes: [{ name: 'main' }],
            });
        }, 2000);
    }

    function onRegistered(){
        navigation.navigate('registered');
    }

    function getNavBarHeight(data: number){
        console.log('getNavBarHeight---:',data);
        setNavBarHeight(data)
    }

    function onLogin(){
        console.log('onLogin');
    }

    useEffect(()=>{
            StatusBar.setBarStyle('dark-content');
    },[]);

    return (
         <View style={{ flex: 1,backgroundColor:"#fff"}}>
            <Headers
                title={''}
                border={false}
                barStyle={0}
                leftTitle={''}
                backgroundColor={'#fff'}
                centerColor={'#666'}
                {...props}
                getNavBarHeight={getNavBarHeight}
                rightContent={
                    <View>
                        <Pressable onPress={()=>onRegistered()}>
                            <View>
                                <Text style={{color:'#38B781'}}>{t('t386')}</Text>
                            </View>
                        </Pressable>
                    </View>
                }
            />
            <KeyboardAwareScrollView style={{flex:1,paddingTop :navBarHeight,flexDirection:'column'}}>
                <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}>
                    <View style={styles.form}>
                        <View style={styles.logobox}>
                            <Image
                                source={
                                    require('@/assets/images/auth/logo2.png')
                                }
                                style={[styles.IconImage]}
                            />
                        </View>
                        <View>
                            <View>
                                <Text style={styles.title}>{t('t371')}</Text>
                            </View>
                            <View>
                                <Text style={styles.subtitle}>{t('t396')}</Text>
                            </View>
                        </View>
                        <View style={styles.tabbox}>
                            <Pressable onPress={()=>{
                                setTabIndex('0');
                                setPhone('');
                            }} style={[styles.tabItem,tabIndex+''=='0'?styles.tabItemActive:null]}>
                                <Text style={[styles.tabtext,tabIndex+''=='0'?styles.tabtextActive:null]}>{t('t366')}</Text>
                            </Pressable>
                            <Pressable onPress={()=>{
                                setTabIndex('1');
                                 setPhone('');
                            }} style={[styles.tabItem,tabIndex+''=='1'?styles.tabItemActive:null]}>
                                <Text style={[styles.tabtext,tabIndex+''=='1'?styles.tabtextActive:null]}>{t('t367')}</Text>
                            </Pressable>
                        </View>
                        <View style={styles.formItem}>
                            <TextInput
                                value={phone}
                                onChangeText={(text) => {
                                    const newText = text.replace(/[^\d]+/, '');
                                    setPhone(newText)
                                }}
                                style={styles.input} placeholder={tabIndex+''=='0'?t('t368'):t('t369')}  secureTextEntry={true} />
                        </View>
                        <View style={[{ marginTop: 20 }]}>
                            <Button 
                                onClick={() => {
                                    handleLogin();
                                }}
                                disabled={disabled}
                                style={styles.login_box_footer_btn}
                            >
                                <Text style={styles.login_box_footer_btn_text}>{t('t255')}</Text>
                            </Button>
                        </View>
                    </View>
                </View>
            </KeyboardAwareScrollView>
            <View>
                <Text style={styles.loginBox}>{t('t370')}<Text onPress={()=>{
                    onLogin();
                }} style={{color:'#38B781'}}>{t('t371')}</Text></Text>
            </View>
        </View>
    )
}

export default ResetPasswordScreen;